<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" ref="formInline" label-width="90px" slot="form" label-position="right">          
                <el-row :gutter="41"> 
                    <el-col :span="8">
                        <el-form-item label="设备定位">
                            <el-input v-model="formInline.sPosition" placeholder="请输入设备定位" :maxlength="20" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备ID">
                            <el-input v-model="formInline.sNumber" placeholder="请输入设备ID" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                    </el-col>
                </el-row>
                
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="attendanceTime">考勤时间设置</el-button>
                    <!--<el-button  @click="pushError">异常推送设置</el-button>-->
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                <el-table-column  align="center" label="设备定位" min-width="100">
                     <template scope="scope">
                         {{scope.row.sPosition || '--'}}
                     </template>
                </el-table-column>
                
                <el-table-column  align="center" label="设备类型" min-width="110">
                    <template scope="scope">
                         {{scope.row.sDeviceName || '--'}}
                     </template>
                </el-table-column>
                
                <el-table-column align="center" label="设备ID" min-width="140">
                     <template scope="scope">
                         {{scope.row.sNumber || '--'}}
                     </template>
                </el-table-column>

                <el-table-column align="center" label="创建时间" min-width="140">
                     <template scope="scope">
                         {{scope.row.sCreateTime || '--'}}
                     </template>
                </el-table-column>

                <el-table-column prop="createTime" align="center" label="设备状态" min-width="170">
                    <template scope="scope">
                        <span v-if="scope.row.sFlag==0">启用</span>
                        <span v-if="scope.row.sFlag==1">禁用</span>
                    </template> 
                </el-table-column> 

                <el-table-column  label="其他操作" min-width="90">
                    <template scope="scope">    
                        <el-button type="text" class="btn-success" @click="checked(scope.row.pId)">查看</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
        <errorPush :errorPush="errorPush" ref="errorPush"></errorPush>
        <attendTime :addData="attendTime" ref="attendTime"></attendTime>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import errorPush from './comps/errorPush';
import attendTime from './comps/attendTime';
import {pageDevice} from 'api/equipmentMange';
import { mapState, mapActions, mapGetters } from 'vuex';

export default{
    name: 'equipment',
    components: {TableLayout, Levelbar, errorPush, attendTime},
    data() {
        return {
            formInline: {// form表单数据
                sNumber: '',
                sPosition: ''
            },
            dataApply: [],
            errorPush: {
                dialogErrorPush: false
            },
            attendTime: {
                dialogAttendTime: false
            },
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            dialog: {
                dialogFormVisible: false
            },
            dataForm: {

            },
            loading: false
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'schoolId',
            'cardIsOpen'
        ])
    },
    filters: {
        filterCreateTime(val) {           
            if (val) {
                return val.substr(0, val.length-2) 
            } else {
                return '--'
            }
        }

    },
    // 初始化
    created() {
        if (this.cardIsOpen == 1) {
            this.searchFetchData();
        } else {
            this.$message('该服务未开通！');
        }
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pageDevice(this.listQuery.page, this.config.pageSize, this.schoolId, this.formInline.sPosition, this.formInline.sNumber).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false; 
            }).catch(() => {
                this.$message.error(response.data.errorMsg);
            });
        },
        // 考勤时间设置
        attendanceTime() {
            if (this.cardIsOpen == 1) {
                this.$refs.attendTime.getAttendanceTime();
                this.attendTime.dialogAttendTime = true;
            } else {
                this.$message('该服务未开通！');
            }
        },

        // 推送异常
        pushError() {
            if (this.cardIsOpen == 1) {
                this.$refs.errorPush.getExpress();
                this.$refs.errorPush.getExceptionPush();
                this.errorPush.dialogErrorPush = true;
            } else {
                this.$message('该服务未开通！');
            }
        },
               // 点击查询 
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    if (this.cardIsOpen == 1) {
                        this.searchFetchData();
                    } else {
                        this.$message('该服务未开通！');
                    }
                } else {
                    return false;
                }
            });
        },
        // 跳转
        checked(id) {
            this.$router.push({path: `/equipment/getEquipment/${id}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    $bgcolor: #fff;
    .app-levelbar {
        height: 35px;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>
